import React, { useState, useEffect } from 'react';
import {
    View, Text, TouchableOpacity, TextInput,
} from 'react-native';
import { Modal, WhiteSpace } from '@ant-design/react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import PropTypes from 'prop-types';
import moment from 'moment';
import {
    updateWorkTime, changePlanState, updateEndTime, updateTimeout,
} from '../../../../comconfig/sqlfun';
import styles from './styles';

const Item = ({ objItem, getPlanList }) => {
    const [showWorkTime, setShowWorkTime] = useState(false);
    const [workTime, setWorkTime] = useState();
    const planId = parseInt(objItem.planid, 10);
    const planWorkTime = parseFloat(objItem.planWorkTime);
    const actuallyWorkTime = parseFloat(objItem.actuallyWorkTime);
    const diff = moment(objItem.planTime).diff(moment(new Date()), 'days');
    useEffect(() => {
        if (planWorkTime < actuallyWorkTime || diff < 0) {
            updateTimeout(planId);
        }
    }, [actuallyWorkTime]);

    return (
        <View style={styles.card}>
            <TouchableOpacity
                onPress={() => setShowWorkTime(true)}
                onLongPress={() => Modal.operation([
                    {
                        text: '挂起',
                        onPress: () => {
                            changePlanState(planId, 2);
                            getPlanList();
                        },
                        style: { color: '#0F8DE9' },
                    },
                    {
                        text: '准备验收',
                        onPress: () => {
                            changePlanState(planId, 3);
                            getPlanList();
                        },
                        style: { color: '#0F8DE9' },
                    },
                    {
                        text: '完成',
                        onPress: () => {
                            changePlanState(planId, 4);
                            updateEndTime(planId, moment(new Date()).format('YYYY-MM-DD'));
                            getPlanList();
                        },
                        style: { color: '#0F8DE9' },
                    },
                ])}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <Text style={styles.titel}>{objItem.title}</Text>
                    {
                        !(planWorkTime < actuallyWorkTime || diff < 0) ? null
                            : (
                                <Text style={{ marginRight: 10, fontSize: 16, color: '#F74153' }}>
                                    已超时
                                </Text>
                            )
                    }

                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <View style={styles.date}>
                        <AntDesign
                            name="calendar"
                            size={25}
                            color="#017BFF"
                            style={{ marginRight: 5 }}
                        />
                        <Text style={styles.context}>
                            {moment(objItem.startTime).format('YY-MM-DD')}
                        </Text>
                        <Text style={{ fontSize: 18, color: '#4EC990' }}>
                            开始
                        </Text>
                    </View>
                    <View style={styles.date}>
                        <Text style={styles.context}>
                            {moment(objItem.planTime).format('YY-MM-DD')}
                        </Text>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            完成
                        </Text>
                    </View>
                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <AntDesign
                        name="clockcircleo"
                        size={25}
                        color="#017BFF"
                        style={{ marginRight: 5 }}
                    />
                    <View style={styles.date}>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            预计
                        </Text>
                        <Text style={styles.context}>
                            {objItem.planWorkTime}
                            小时
                        </Text>
                    </View>
                    <View style={styles.date}>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            已进行
                        </Text>
                        <Text style={styles.context}>
                            {objItem.actuallyWorkTime}
                            小时
                        </Text>
                    </View>
                </View>
                <Modal
                    title="工作时长"
                    transparent
                    onClose={() => { setShowWorkTime(false); }}
                    maskClosable
                    visible={showWorkTime}
                    footer={[
                        {
                            text: '取消',
                            onPress: () => {
                                setWorkTime(null);
                            },
                        },
                        {
                            text: '确定',
                            onPress: () => {
                                updateWorkTime(planId, parseFloat(workTime));
                                getPlanList();
                                setWorkTime(null);
                            },
                        },
                    ]}
                >
                    <TextInput
                        maxLength={4}
                        style={{ fontSize: 20, color: '#007AFF' }}
                        placeholder="时长"
                        keyboardType="numeric"
                        value={workTime}
                        onChangeText={(text) => {
                            // eslint-disable-next-line max-len
                            let newText = (text !== '' && text.substr(0, 1) === '.') ? '' : text;
                            newText = newText.replace(/^0+[0-9]+/g, '0');
                            newText = newText.replace(/[^\d.]/g, '');
                            newText = newText.replace(/\.{2,}/g, '.');
                            // eslint-disable-next-line max-len
                            newText = newText.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
                            newText = newText.replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                            setWorkTime(newText);
                        }
                        }
                    />
                </Modal>
            </TouchableOpacity>
        </View>
    );
};
Item.defaultProps = {
    objItem: {},
    getPlanList: () => {},
};
Item.propTypes = {
    objItem: PropTypes.objectOf(PropTypes.any),
    getPlanList: PropTypes.func,
};
export default Item;
